<template>
    <div class="">
        <van-icon name="arrow-left" @click="goBack" />
        <h2>{{ name }}</h2> 
        <ul class="radio">
            <li v-for="(item,id) in radioUrl" :key="item.id" @click="selectSong(item)">
                <span> {{ id+1 }}.{{item.title}}</span>
                <ul class="radio-qiantao">
                    <li v-for="itemSinger in item.singer" :key="itemSinger.id">
                        <span>歌手：{{ itemSinger.name }}</span><br> 
                        <span>出版日期：{{ item.time_public }}                   
                        </span>
                        <span @click="selectComment(item)">
                            <van-badge content="Hot">
                            评论
                            </van-badge>
                        </span>
                    </li>
                </ul>
            </li>
            
        </ul>
       
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data(){
        return{
            radioUrl:[],
            singerUrl:[]
        };
    },
    created(){
        this.getData();
    },
    methods:{
        getData(){
            axios.get("/api/radio",{
                params:{
                    id:this.$route.params.id,
                }
            })
            .then(res => {
                console.log(res.data.data.tracks)
                this.radioUrl=res.data.data.tracks
                console.log(res.data.data.tracks[0].singer[0].name);
                this.singerUrl=res.data.data.tracks[0].singer[0].name
            })
            .catch(err => {
                console.error(err); 
            })
        },
        goBack() {
          this.$router.go(-1);
        },
        selectSong(item){
            axios.get("/jsososo/song/urls",{
                params:{
                id:item.ksong.mid
                 }
            })
            .then(res => {
                console.log(res.data.data[item.ksong.mid])
                this.songUrl=res.data.data[item.ksong.mid]
             })
            .catch(err => {
                console.error(err); 
             })
            },
            selectComment(item){
            const id = item.id
            this.$router.push({path:`/jumpcomment/${id}`})
        },
        }
}
</script>

<style scoped>
 .van-icon{
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 999;
  font-size: 40px;
}
li{
    text-align: left;
    margin: 10px 20px;
    
}
.radio>li>span{
     line-height: 16px;
  display: block;
    font-size: 20px;
  overflow: hidden; /*文本超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
  width: 300px;/**范围 */
  white-space: nowrap; /*超出的空白区域不换行*/  
  
  
}
.radio-qiantao>li>span:nth-of-type(1){
    font-size: 15px;
}
.radio-qiantao>li>span:nth-of-type(2){
    font-size: 10px;
}
.radio-qiantao>li>span:nth-of-type(3){
    font-size: 15px;
    padding-left: 90%;
}
.radio>li{
    background: #faebd7;
    border-radius: 10px;
    margin: 5px;
}

</style>